<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.7.3/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">

</head>
<body>

<div class="layuimini-container">
    <div class="layuimini-main">

        

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加</button>
            </div>

        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="update">修改</a></a>

        </script>
    </div>
</div>


<script src="../../lib/layui-v2.6.3/layui.js"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>

<script src="../../api/urlConfig.js"></script>
<script type="text/javascript">


    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;

        table.render({
            elem: '#currentTableId',
            url: ipURL + "/admin/type/page",
            headers: {token: localStorage.token},
            parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data,//解析数据列表

                };

            },

            response: {
                statusCode: 0//规定成功的状态码，默认：0
            },
            text: {none: '无数据'},
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'id', title: 'ID', sort: true, hide: true},
                {field: 'name', title: '名称'},
                {field: 'description', title: '描述'},
                {field: 'icon', title: '图标'},
                {field: 'open', title: '状态'},
                {field: 'labelNames', title: '标签'},
                {field: 'sort', title: '排序',sort: true,},
                {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line'
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var email = $('input[id="emailSearch"]').val()
            var name = $('input[id="nameSearch"]').val()
            //执行搜索重载
            table.reload('currentTableId', {

                page: {
                    curr: 1
                }
                , where: {
                    email: email,
                    name: name
                }
            });
            return false;
        });

        /**
         * toolbar监听事件
         */
        table.on('toolbar(currentTableFilter)', function (obj) {


                var checkStatus = table.checkStatus('menu');
                var data = checkStatus.data;

                if (obj.event === 'add') {
                    $('#save')[0].reset();
                    layer.open({
                        type: 1,
                        title: '新增',
                        area: ['850px', '500px'],
                        content: $('#save'),
                        btn: ['提交', '退出'],
                        end: function () {
                            $('#save').css('display', 'none')
                            return false;
                        },
                        yes: function () {
                        },
                        success: function (layero, index) {
                            layui.use('form', function () {

                                var form = layui.form;
                                layero.addClass('layui-form');
                                var submitBtn = layero.find('.layui-layer-btn0');
                                submitBtn.attr('lay-filter', 'formVerify').attr('lay-submit', '');
                                layero.keydown(function (e) {
                                    if (e.keyCode == 13) {
                                        submitBtn.click();
                                    }
                                });

                                form.on('submit(formVerify)', function (data) {
                                    $.ajax({
                                        url: ipURL + '/admin/type',
                                        method: 'post',
                                        data: JSON.stringify(data.field),
                                        dataType: 'JSON',
                                        contentType: 'application/json;charset=UTF-8',
                                        beforeSend: function (request) {
                                            request.setRequestHeader("token", localStorage.token);
                                        },
                                        success: function (res) {
                                            layer.msg(res.message);
                                            layer.close(index);
                                            treeData();
                                        },
                                        error: function (data) {
                                            layer.msg(res.message);
                                        }
                                    });

                                    return false;
                                });
                            });
                        }

                    })

                }

        })

        table.on('tool(currentTableFilter)', function (obj) {
       
            var data = obj.data;
            if (obj.event === 'update'){
               //给表单赋值
               form.val("stuform", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                        "id": data.id // "name": "value"
                        ,"name":data.name
                        ,"description": data.description
                        ,"icon": data.icon
                        ,"labelNames": data.labelNames
                        ,"open": data.open
                    });


                    layer.open({
                        type: 1,
                        title: '修改',
                        area: ['850px', '500px'],

                        content: $('#save'),
                        btn: ['提交', '退出'],
                        end:function(){
                            $('#save').css('display','none')
                        },
                        yes:function(){
                        },

                        success:function(layero,index){

                            layui.use('form',function(){
                                var form=layui.form;
                                layero.addClass('layui-form');
                                var submitBtn=layero.find('.layui-layer-btn0');
                                submitBtn.attr('lay-filter','formVerify').attr('lay-submit','');
                                layero.keydown(function(e){
                                    if(e.keyCode==13){
                                        submitBtn.click();
                                    }
                                });

                                form.on('submit(formVerify)',function(data){

                                    $.ajax({
                                        url: ipURL + '/admin/type',
                                        method: 'put',
                                        data: JSON.stringify(data.field),
                                        dataType: 'JSON',
                                        contentType: 'application/json;charset=UTF-8',
                                        beforeSend: function (request) {
                                            request.setRequestHeader("token", localStorage.token);
                                        },
                                        success: function (res) {
                                            layer.msg(res.message);
                                            layer.close(index);
                                            // treeData();
                                            table.reload('currentTableId', {
                                                data: res.data,
                                            });

                                        },
                                        error: function (data) {
                                            layer.msg(res.message);
                                        }
                                    });


                                    return false;
                                });
                            });
                        }
                    })

            }
        });
    })

</script>


</body>


<style type="text/css">
    .myData .layui-form-item {
        margin: 20px 100px 10px 45px;
    }

    .myData .layui-form-label {
        width: 80px;
    }
</style>

<form class="layui-form myData" action="save" method="post" lay-filter="stuform" id="save" style="display: none">
    <input type="hidden" name="id"/>
    <div class="layui-form-item">
        <label class="layui-form-label">名称:</label>
        <div class="layui-input-block">
            <input type="text" name="name" class="layui-input"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">描述:</label>
        <div class="layui-input-block">
            <input type="text" name="description" class="layui-input"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图标:</label>
        <div class="layui-input-block">
            <input type="text" name="icon" class="layui-input"/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">标签:</label>
        <div class="layui-input-block">
            <input type="text" name="labelNames" class="layui-input"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态:</label>
        <div class="layui-input-block">
            <input type="text" name="open" class="layui-input"/>
        </div>
    </div>
</form>


</html>